<template>
    <div class="detail_right_bottom_item">
        <p>{{name}}</p>
        <div class="bottom_item_content">
            <div id="content" v-if="type === 0"></div>
            <div v-if="type === 1">
                <video src="globle/movie.ogg" controls="controls" height="230" width="100%">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "bottom-item",
        props: ['type', 'name'],
        components: {},
        data() {
            return {}
        },
        mounted() {
            if (!this.type) {
                this.drawRelation();
            }
        },
        methods: {
            drawRelation() {
                let relationChart = echarts.init(document.getElementById('content'));
                let option = {
                    tooltip: {
                        formatter: function (x) {
                            return x.data.des;
                        }
                    },
                    series: [
                        {
                            type: 'graph',
                            layout: 'force',
                            symbolSize: 80,
                            roam: true,
                            focusNodeAdjacency: true,
                            edgeSymbol: ['circle', 'arrow'],
                            edgeSymbolSize: [4, 10],
                            force: {
                                repulsion: 2500,
                                edgeLength: [10, 50]
                            },
                            draggable: true,
                            itemStyle: {
                                normal: {
                                    color: '#999'
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: '#3ae22d'
                                }
                            },
                            edgeLabel: {
                                normal: {
                                    show: true,
                                    formatter: function (x) {
                                        return x.data.name;
                                    }
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {},
                                    position: [10, 50],
                                    fontWeight: 'bold',
                                    color: '#fff'
                                }
                            },
                            data: [
                                {
                                    name: '中国',
                                    des: '描述文字<br/>具体内容<br/>',
                                    symbol: 'image://globle/image/house.png',
                                    symbolSize: 50,
                                    itemStyle: {
                                        normal: {}
                                    }
                                }, {
                                    name: '军事基地1',
                                    des: '描述文字<br/>具体内容<br/>',
                                    symbol: 'image://globle/image/radar.png',
                                    symbolSize: 50,
                                }, {
                                    name: '军事基地2',
                                    symbol: 'image://globle/image/house.png',
                                    des: '',
                                    symbolSize: 50
                                }, {
                                    name: '军事基地3',
                                    symbol: 'image://globle/image/house.png',
                                    des: '',
                                    symbolSize: 50
                                }, {
                                    name: '军事基地4',
                                    symbol: 'image://globle/image/house.png',
                                    des: '',
                                    symbolSize: 50
                                }, {
                                    name: '军事基地5',
                                    symbol: 'image://globle/image/house.png',
                                    des: '',
                                    symbolSize: 50
                                }, {
                                    name: '人物1',
                                    symbol: 'image://globle/image/house.png',
                                    des: '',
                                    symbolSize: 50
                                }, {
                                    name: '人物2',
                                    symbol: 'image://globle/image/man.png',
                                    des: '',
                                    symbolSize: 50
                                }
                            ],
                            links: [
                                {
                                    source: '军事基地1',
                                    target: '中国',
                                    name: '属于',
                                    des: '关系描述信息'
                                }, {
                                    source: '军事基地2',
                                    target: '中国',
                                    name: '属于',
                                    des: '关系描述信息'
                                }, {
                                    source: '军事基地3',
                                    target: '中国',
                                    name: '属于',
                                    des: '关系描述信息'
                                }, {
                                    source: '军事基地4',
                                    target: '中国',
                                    name: '属于',
                                    des: '关系描述信息'
                                }, {
                                    source: '军事基地5',
                                    target: '中国',
                                    name: '属于',
                                    des: '关系描述信息'
                                }, {
                                    source: '人物1',
                                    target: '军事基地1',
                                    name: '管理',
                                    des: '关系描述信息'
                                }, {
                                    source: '人物2',
                                    target: '军事基地2',
                                    name: '管理',
                                    des: '关系描述信息'
                                }
                            ]
                        }
                    ]
                };
                relationChart.setOption(option);
            }
        }
    }
</script>

<style lang="less" type="text/less" scoped>
    @import "bottomItem";
</style>